<template>
  <div class="app-container paper">
    <h2 class="paper__name">{{ props.paperDetails.paperName }}</h2>

    <div v-if="!props.isPreview" class="paper__block">
      <h3 class="paper__block-name">答题卡</h3>

      <div class="paper__block-info">
        <p class="paper__block-info-title">已答:</p>
        <div class="paper__block-select paper__block-select-bg"></div>
        <p class="paper__block-info-title paper__block-info-title-ml15">
          未答:
        </p>
        <div class="paper__block-select"></div>
      </div>
      <p
        v-if="singleSelectQuestion && singleSelectQuestion.length"
        class="paper__block-title"
      >
        一、单选题（{{ props.paperDetails.danXuanScore }}分/题）
      </p>
      <div
        v-for="(item, index) in singleSelectQuestion"
        :key="index"
        class="paper__block-select"
        :class="{ 'paper__block-select-bg': item.answer }"
      ></div>
      <p
        v-if="multipleSelectQuestion && multipleSelectQuestion.length"
        class="paper__block-title"
      >
        二、多选题（{{ props.paperDetails.duoXuanScore }}分/题）
      </p>
      <div
        v-for="(item, index) in multipleSelectQuestion"
        :key="index"
        class="paper__block-select"
        :class="{ 'paper__block-select-bg': item.answer }"
      ></div>
      <p
        v-if="judgeSelectQuestion && judgeSelectQuestion.length"
        class="paper__block-title"
      >
        三、判断题（{{ props.paperDetails.panDuanScore }}分/题）
      </p>
      <div
        v-for="(item, index) in judgeSelectQuestion"
        :key="index"
        class="paper__block-select"
        :class="{ 'paper__block-select-bg': item.answer }"
      ></div>

      <div class="paper__block-footer">
        <el-button type="primary" @click="handlePaper">交 卷</el-button>
      </div>
    </div>

    <div
      v-if="singleSelectQuestion && singleSelectQuestion.length"
      class="paper__single-select"
    >
      <h3 class="paper__title">
        一、单选题（{{ props.paperDetails.danXuanScore }}分/题）
      </h3>

      <div
        class="paper__item"
        v-for="(item, index) in singleSelectQuestion"
        :key="index"
      >
        <!-- questionId -->
        <p class="paper__item-title">
          {{ index + 1 }}、{{ item.questionTitle }}
        </p>
        <el-radio-group
          v-model="item.answer"
          class="ml-4"
          :disabled="props.isPreview"
        >
          <el-radio
            v-for="(question, questionIndex) in item.questionAnswerList"
            :key="questionIndex"
            :label="question.optionLabel"
            size="large"
            >{{ question.optionLabel }}{{ question.content }}</el-radio
          >
        </el-radio-group>
      </div>
    </div>
    <div
      v-if="multipleSelectQuestion && multipleSelectQuestion.length"
      class="paper__multiple-select"
    >
      <h3 class="paper__title">
        二、多选题（{{ props.paperDetails.duoXuanScore }}分/题）
      </h3>

      <div
        class="paper__item"
        v-for="(item, index) in multipleSelectQuestion"
        :key="index"
      >
        <p class="paper__item-title">
          {{ index + 1 }}、{{ item.questionTitle }}
        </p>
        <el-checkbox-group v-model="item.answer" :disabled="props.isPreview">
          <el-checkbox
            v-for="(question, questionIndex) in item.questionAnswerList"
            :key="questionIndex"
            :label="question.optionLabel"
            >{{ question.optionLabel }}{{ question.content }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
    </div>
    <div
      v-if="judgeSelectQuestion && judgeSelectQuestion.length"
      class="paper__judge-select"
    >
      <h3 class="paper__title">
        三、判断题（{{ props.paperDetails.panDuanScore }}分/题）
      </h3>
      <div
        class="paper__item"
        v-for="(item, index) in judgeSelectQuestion"
        :key="index"
      >
        <p class="paper__item-title">
          {{ index + 1 }}、{{ item.questionTitle }}
        </p>
        <el-radio-group v-model="item.answer" :disabled="props.isPreview">
          <el-radio
            v-for="(question, questionIndex) in judgeQuestionAnswerList"
            :key="questionIndex"
            :label="question.optionLabel"
            size="large"
            >{{ question.content }}</el-radio
          >
        </el-radio-group>
      </div>
    </div>
  </div>
</template>

<script setup name="Paper">
import { examAnswer } from "@/api/testCenter/paper";

const emit = defineEmits(["paperSuccess"]);

const props = defineProps({
  paperDetails: {
    type: Object,
    default: () => {},
  },
  currentId: {
    type: String,
    default: "",
  },
  isPreview: {
    type: Boolean,
    default: false,
  },
});

const judgeQuestionAnswerList = [
  {
    optionLabel: "正确",
    content: "正确",
  },
  {
    optionLabel: "错误",
    content: "错误",
  },
];

const singleSelectQuestion = ref(props.paperDetails.danxuanList || []);
const multipleSelectQuestion = ref(props.paperDetails.duoxuanList || []);
const judgeSelectQuestion = ref(props.paperDetails.panduanList || []);

const { proxy } = getCurrentInstance();

watch(
  () => props.currentId,
  (value) => {
    singleSelectQuestion.value = props.paperDetails.danxuanList;
    multipleSelectQuestion.value = props.paperDetails.duoxuanList;
    judgeSelectQuestion.value = props.paperDetails.panduanList;
  }
);

function handlePaper(row) {
  proxy.$modal
    .confirm("是否确定交卷？")
    .then(() => {
      submitForm();
    })
    .catch(() => {});
}

function submitForm() {
  const singleQuestionAnswers = singleSelectQuestion.value.map((question) => ({
    questionId: question.questionId,
    answer: [question.answer],
  }));

  const multipleQuestionAnswers = multipleSelectQuestion.value.map(
    (question) => ({
      questionId: question.questionId,
      answer: question.answer,
    })
  );

  const judgeQuestionAnswers = judgeSelectQuestion.value.map((question) => ({
    questionId: question.questionId,
    answer: [question.answer],
  }));

  let stuAnswersList = [];

  if (singleQuestionAnswers && singleQuestionAnswers.length > 0)
    stuAnswersList = stuAnswersList.concat(singleQuestionAnswers);
  if (multipleQuestionAnswers && multipleQuestionAnswers.length > 0)
    stuAnswersList = stuAnswersList.concat(multipleQuestionAnswers);
  if (judgeQuestionAnswers && judgeQuestionAnswers.length > 0)
    stuAnswersList = stuAnswersList.concat(judgeQuestionAnswers);

  examAnswer({
    stuAnswersList,
    exameId: props.currentId,
  })
    .then((res) => {
      proxy.$modal.msgSuccess("交卷成功");
      emit("paperSuccess");
    })
    .catch(() => {
      proxy.$modal.msgError("交卷失败，请联系管理员");
    });
}
</script>

<style lang="scss" scoped>
.paper {
  color: #222;
  padding: 0 32px;

  &__name {
    margin: 0 auto;
    font-size: 20px;
    margin-bottom: 28px;
  }

  &__title {
    color: #298dff;
    font-size: 18px;
    font-weight: bold;
    margin-top: 25px;
    margin-bottom: 20px;
  }

  &__item {
    padding-left: 15px;
    margin-top: 8px;
  }

  &__item-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
  }

  &__block {
    position: fixed;
    top: 75px;
    right: 50px;
    padding: 32px 35px;
    width: 380px;
    border: 1px solid #ccc;
  }

  &__block-info {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin-bottom: 20px;
  }

  &__block-name {
    font-size: 16px;
    color: #222;
    margin-top: 0;
    margin-bottom: 18px;
  }

  &__block-info-title {
    color: #666;
    font-size: 14px;
    margin-right: 4px;
    margin-top: 0;
    margin-bottom: 0;
  }

  &__block-info-title-ml15 {
    margin-left: 15px;
  }

  &__block-title {
    margin-top: 18px;
    margin-bottom: 10px;
    color: #298dff;
    font-size: 14px;
    font-weight: 600;
  }

  &__block-select {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #aaa;
    margin-top: 8px;
    margin-right: 8px;
  }

  &__block-select-bg {
    border-color: #298dff;
    background-color: #298dff !important;
  }

  &__block-info > &__block-select {
    margin: 0;
  }

  &__block-footer {
    margin-top: 15px;
  }
}
</style>
